<template>
  <div>
    <el-form
      ref="ruleForm"
      :inline="true"
      :model="searchForm"
      class="demo-form-inline"
    >
      <el-col v-for="(item, index) in formItemList" :key="index" :span="8">
        <transition name="fade" mode="out-in">
          <el-form-item
            v-show="index < formNum"
            label-width="110px"
            :label="item.label"
          >
            <span v-if="item.required" slot="label">
              <span style="color: red">{{ item.label }}</span>
            </span>
            <el-input
              v-if="item.type == 'input'"
              v-model="searchForm[item.param]"
              style="width: 230px"
              :placeholder="`请输入${item.label}`"
            />
            <el-select
              v-if="item.type == 'select'"
              v-model="searchForm[item.param]"
              :clearable="true"
              style="width: 230px"
              :filterable="item.filterable"
              placeholder="请选择"
            >
              <el-option
                v-for="(subitem, subindex) in item.selectOptions"
                :key="subindex"
                :label="subitem[item.name]"
                :value="subitem[item.value]"
              />
            </el-select>
            <el-date-picker
              v-if="item.type == 'daterange'"
              v-model="searchForm[item.param]"
              style="width: 230px"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            <el-cascader
              v-if="item.type == 'cascader'"
              v-model="searchForm[item.param]"
              style="width: 230px"
              :options="item.options.options"
              v-bind="item.options"
              :class="item.options.class"
              @change="
                (value) => {
                  item.options.onChange && item.options.onChange(value);
                  $emit('change');
                }
              "
            />
            <!-- 自定义组件 -->
            <template v-if="item.type === 'Slots'">
              <slot :name="item.param" />
            </template>
          </el-form-item>
        </transition>
      </el-col>
      <el-col class="right_search_button">
        <slot name="SearchButton" />
        <template v-if="button">
          <el-button type="primary" plain @click="onEmpty">重置</el-button>
          <el-button type="primary" plain @click="onSearch">查询</el-button>
        </template>
        <el-button
          v-if="formItemList.length > 2"
          type="text"
          style="margin-right: 82%;"
          size="small"
          @click="spread"
        >{{ formNum < 3 ? "更多" : "收起" }}</el-button>
      </el-col>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'WangSearch',
  props: {
    formItemList: {
      type: Array,
      default() {
        return []
      }
    },
    button: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const searchForm = {}
    this.formItemList.forEach((item) => {
      searchForm[item.param] = item.defaultSelect || ''
    })
    return {
      searchForm,
      formNum: 2
    }
  },
  watch: {
    formItemList: {
      handler(val) {
        val.forEach((item) => {
          if (item?.defaultValue) {
            this.searchForm[item.param] = item.defaultValue
          }
        })
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 重置表单
    onEmpty() {
      const searchForm = {}
      this.formItemList.forEach((item) => {
        searchForm[item.param] = ''
      })
      this.searchForm = searchForm
      this.$emit('reset')
      this.$emit('search', this.searchForm)
    },
    // 搜索
    onSearch() {
      this.$emit('search', this.searchForm)
    },
    spread() {
      if (this.formNum < 3) {
        this.formNum = this.formItemList.length
      } else {
        this.formNum = 2
      }
    }
  }
}
</script>

<style lang="scss">
.demo-form-inline {
  border-top: 1px solid transparent;
  padding-bottom: 80px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.el-form-item--medium .el-form-item__content {
  line-height: 39px !important;
}
.right_search_button {
  margin-bottom: 20px;
  position: relative;
  left: 80%;
  top: 0;
}
.el-input__suffix-inner {
  display: inline-block;
  margin-top: -20px;
}
</style>
